﻿<common:LayoutAwarePage x:Name="pageRoot"
                        x:Class="RWSBeeldbank.FullScreenItemDetailPage"
                        DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
                        IsTabStop="false"
                        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                        xmlns:bm="using:Bing.Maps"
                        xmlns:local="using:RWSBeeldbank"
                        xmlns:common="using:RWSBeeldbank.Common"
                        xmlns:data="using:RWSBeeldbank.Data"
                        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                        mc:Ignorable="d">

    <Page.Resources>
        <common:ListConverter x:Key="ListConverter" />
        <common:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />

        <!-- Collection of items displayed by this page -->
        <CollectionViewSource x:Name="itemsViewSource"
                              Source="{Binding Items}"
                              d:Source="{Binding AllGroups[0].Items, Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}" />
    </Page.Resources>

    <common:LayoutAwarePage.TopAppBar>
        <AppBar x:Name="topAppBar">
            <Grid>
                <bm:Map Credentials="Agzynzm3397qqkK_hork8zheX6HaP_6Ul9Y4P8xXNhC3Pn1MAKHbOw8QtYsYxx0n"
                        x:Name="myMap"
                        ZoomLevel="12"
                        Height="300"
                        Width="1366"
                        ShowBuildings="False">
                    <bm:Map.Center>
                        <bm:Location Latitude="52"
                                     Longitude="5" />
                    </bm:Map.Center>
                    <bm:Map.Children>
                        <bm:Pushpin x:Name="pushPin">
                            <bm:MapLayer.Position>
                                <bm:Location Latitude="52"
                                             Longitude="5" />
                            </bm:MapLayer.Position>
                        </bm:Pushpin>
                    </bm:Map.Children>
                </bm:Map>
            </Grid>
        </AppBar>
    </common:LayoutAwarePage.TopAppBar>

    <Page.BottomAppBar>
        <AppBar x:Name="PageAppBar"
                Padding="10,0,10,0">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="100*" />
                    <ColumnDefinition Width="50*" />
                </Grid.ColumnDefinitions>
                <StackPanel x:Name="LeftCommands"
                            Orientation="Horizontal"
                            Grid.Column="0"
                            HorizontalAlignment="Left">
                    <Button x:Name="PinMediaObjectButton"
                            HorizontalAlignment="Left"
                            Style="{StaticResource PinAppBarButtonStyle}"
                            Click="OnPinMediaObjectButtonClicked" />
                    <Button x:Name="DownloadMediaObjectButton"
                            HorizontalAlignment="Left"
                            Style="{StaticResource DownloadAppBarButtonStyle}"
                            Click="OnDownloadMediaObjectButtonClicked" />
                    <Button x:Name="LockScreenButton"
                            HorizontalAlignment="Left"
                            Style="{StaticResource SetLockScreenAppBarButtonStyle}"
                            Click="OnSetLockScreenButtonClicked" />
                </StackPanel>
                <StackPanel x:Name="RightCommands"
                            Orientation="Horizontal"
                            Grid.Column="1"
                            HorizontalAlignment="Right">
                    <Button x:Name="BrowseToMediaObjectButton"
                            HorizontalAlignment="Left"
                            Style="{StaticResource GlobeAppBarButtonStyle}"
                            Click="OnBrowseToMediaObjectButtonClicked" />
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Style="{StaticResource LayoutRootStyle}"
          DataContext="{Binding Group}"
          d:DataContext="{Binding AllGroups[0], Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}"
          PointerMoved="Grid_PointerMoved"
          PointerPressed="Grid_PointerPressed">

        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!--
            The remainder of the page is one large FlipView that displays details for
            one item at a time, allowing the user to flip through all items in the chosen
            group
        -->
        <FlipView x:Name="flipView"
                  AutomationProperties.AutomationId="ItemsFlipView"
                  AutomationProperties.Name="Item Details"
                  TabIndex="1"
                  Grid.Row="1"
                  Margin="0,-3,0,0"
                  SelectionChanged="flipView_SelectionChanged"
                  ItemsSource="{Binding Source={StaticResource itemsViewSource}}">
            <FlipView.ItemTemplate>
                <DataTemplate>
                    <UserControl Loaded="StartLayoutUpdates"
                                 Unloaded="StopLayoutUpdates">
                        <Button x:Name="ItemDetailButton"
                                Click="ItemDetailButtonClicked"
                                IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}"
                                BorderThickness="0"
                                Padding="0">
                            <Image x:Name="image"
                                   Width="Auto"
                                   Height="Auto"
                                   Margin="0,0,0,0"
                                   Stretch="Uniform"
                                   Source="{Binding LargeImage}" />
                        </Button>
                    </UserControl>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>

        <!-- FlipView used in portrait mode -->
        <FlipView x:Name="portraitFlipView"
                  AutomationProperties.AutomationId="ItemsFlipView"
                  AutomationProperties.Name="Item Details"
                  Grid.Row="1"
                  Margin="0,-3,0,0"
                  SelectionChanged="flipView_SelectionChanged"
                  ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
                  Visibility="Collapsed">

            <FlipView.ItemTemplate>
                <DataTemplate>
                    <UserControl Loaded="StartLayoutUpdates"
                                 Unloaded="StopLayoutUpdates">
                        <Image x:Name="image"
                               Width="Auto"
                               Height="Auto"
                               Margin="0,0,0,0"
                               Stretch="Uniform"
                               Source="{Binding LargeImage}" />
                    </UserControl>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>

        <FlipView x:Name="snappedFlipView"
                  AutomationProperties.AutomationId="ItemsFlipView"
                  AutomationProperties.Name="Item Details"
                  Grid.Row="1"
                  Margin="0,-3,0,0"
                  SelectionChanged="flipView_SelectionChanged"
                  ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
                  Visibility="Collapsed">

            <FlipView.ItemTemplate>
                <DataTemplate>
                    <UserControl Loaded="StartLayoutUpdates"
                                 Unloaded="StopLayoutUpdates">
                        <Image x:Name="image"
                               Width="Auto"
                               Height="Auto"
                               Margin="0,0,0,0"
                               Stretch="Uniform"
                               Source="{Binding LargeImage}" />
                    </UserControl>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>

        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton"
                    Click="GoBack"
                    IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}"
                    Style="{StaticResource BackButtonStyle}"
                    Margin="36,56,36,0"
                    VerticalAlignment="Top"
                    Visibility="Collapsed" />
        </Grid>

        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape" />
                <VisualState x:Name="Filled" />

                <!-- The back button respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource PortraitBackButtonStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="flipView"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Collapsed" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="portraitFlipView"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Visible" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!-- The back button and title have different styles when snapped -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource SnappedBackButtonStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="flipView"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Collapsed" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="snappedFlipView"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Visible" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</common:LayoutAwarePage>
